<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="keywords" content="在线答题">
  <meta name="description" content="在线答题是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
  <title>在线答题APP后台管理系统</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link href="../Styles/css/bootstrap.min.css" rel="stylesheet">
  <link href="../Styles/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
  <link href="../Styles/css/animate.min.css" rel="stylesheet">
  <link href="../Styles/css/style.min.css" rel="stylesheet">
  <link href="../Styles/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
  <link href="../Styles/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <!-- <link href="../Scripts/plugins/layer/theme/default/layer.css" rel="stylesheet"> -->
  <style>
    #div1 {
      overflow: ;
    }
  </style>
</head>

<body class="gray-bg">
  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
      <div class="ibox-title">
        <h5>筛选条件</h5>
      </div>
      <div class="ibox-content">
        <form id="formSearch" class="form-horizontal">
          <div class="form-group" style="margin-top:15px">
            <label class="control-label col-sm-1" for="txt_search_name">角色名称</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" id="txt_search_name">
            </div>
            <div class="col-sm-4" style="text-align:left;">
              <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- Panel Style -->
    <div class="ibox float-e-margins">
      <div class="ibox-title">
        <h5>角色列表</h5>
      </div>
      <div class="ibox-content">
        <table id="roleList">
        </table>
      </div>
    </div>
    <!-- End Panel Style -->
  </div>
  <script src="../Scripts/jquery.min.js"></script>
  <script src="../Scripts/bootstrap.min.js"></script>
  <script src="../Scripts/content.min.js"></script>
  <script src="../Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="../Scripts/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
  <script src="../Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
  <script src="../Scripts/plugins/sweetalert/sweetalert.min.js"></script>
  <script src="../Scripts/plugins/layer/layer.min.js"></script>


  <script>
    var $queryTable = $("#roleList");
    $(function () {
      //1.初始化Table
      var oTable = new TableInit();
      oTable.Init();
      //2.初始化Button的点击事件
      var oButtonInit = new ButtonInit();
      oButtonInit.Init();
    });

    var TableInit = function () {
      var oTableInit = new Object();
      //初始化Table
      oTableInit.Init = function () {
        var queryUrl = currentUrl + 'Roles'
        $queryTable.bootstrapTable({
          url: queryUrl, //请求后台的URL（*）
          method: 'get', //请求方式（*）
          // toolbar: '#toolbar', //工具按钮用哪个容器
          striped: true, //是否显示行间隔色
          cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
          pagination: true, //是否显示分页（*）
          sortable: false, //是否启用排序
          sortOrder: "asc", //排序方式
          queryParams: oTableInit.queryParams, //传递参数（*）
          sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
          pageNumber: 1, //初始化加载第一页，默认第一页
          pageSize: rows, //每页的记录行数（*）
          pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
          search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
          strictSearch: true,
          showColumns: false, //是否显示所有的列
          showRefresh: false, //是否显示刷新按钮
          minimumCountColumns: 2, //最少允许的列数
          clickToSelect: true, //是否启用点击选中行
          // height: 500,
          //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
          uniqueId: "id", //每一行的唯一标识，一般为主键列
          showToggle: false, //是否显示详细视图和列表视图的切换按钮
          cardView: false, //是否显示详细视图
          detailView: false, //是否显示父子表
          columns: [{
              field: 'id',
              title: 'ID'
            }, {
              field: 'roleName',
              title: '名称'
            },
            {
              field: 'roleState',
              title: '状态',
              formatter: function (value, row, index) {
                if (value == "1") {
                  return '<span class="badge badge-success">正常</span>'
                } else {
                  return '<span class="badge badge-danger">停用</span>'
                }
              }
            }, {
              field: 'id',
              title: '编辑',
              formatter: function (value, row, index) {
                var state = [
                  '<button type="button" class="btn btn-primary btn-rounded" style="margin-right:15px;" onclick="btnEditClick(\'' +
                  value + '\')">编辑</button>',
                  '<button type="button" class="btn btn-danger btn-rounded" style="margin-right:15px;" onclick="btnDelClick(\'' +
                  value + '\')">停用</button>'
                ]
                if (row.roleState == "2") {
                  state[1] =
                    '<button type="button" class="btn btn-primary btn-rounded" style="margin-right:15px;" onclick="btnDelClick(\'' +
                    value + '\')">启用</button>';
                }
                return state.join('');
              }
            }
          ]
        });
      };

      //得到查询的参数
      oTableInit.queryParams = function (params) {
        var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
          PageSize: params.limit, //页面大小
          PageNumber: (params.offset / params.limit) + 1, //页码
          Name: $("#txt_search_name").val()
        };
        return temp;
      };
      return oTableInit;
    };

    var ButtonInit = function () {
      var oInit = new Object();
      var postdata = {};
      oInit.Init = function () {
        //初始化页面上面的按钮事件
        $("#btn_query").click(function () {
          console.info('按钮事件');
          //1.初始化Table
          var oTable = new TableInit();
          oTable.Init();
        });
      };
      return oInit;
    };

    function btnDelClick(value) {
      var delUrl = currentUrl + "Roles";
      $.ajax({
        url: delUrl,
        type: 'DELETE',
        data: {
          'id': value
        },
        dataType: 'json',
        success: function (result) { //边缘弹出
          swal({
            title: "系统提示",
            text: result.message,
            type: result.status ? "success" : "warning",
          }, function () {
            $queryTable.bootstrapTable('refresh');
          });
        }
      });
    }

    function btnEditClick(value) {
      top.layer.open({
        type: 2,
        title: "角色编辑",
        closeBtn: 1,
        shadeClose: true,
        area: ['500px', '500px'],
        content: ['./Role/RoleEdit.html?id=' + value, 'no'],
        offset: 'auto',
        scrollbar: true,
        btn: ["确定", "取消"],
        yes: function (index, layero) {
          //【确定】按钮的回调
          // var body = top.layer.getChildFrame('body', index);
          var iframeWin = top[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
          iframeWin.SubmitMethod($queryTable);
          
        },
        btn2: function (index, layero) {
          $queryTable.bootstrapTable('refresh');
        },
        cancel: function (index, layero) {
          $queryTable.bootstrapTable('refresh');
        },
        success: function (layero, index) {
          var editDiv = top.document.querySelector("iframe[name^='layui-layer-iframe']");
          //查找弹出的iframe的name属性是以'layui-layer-iframe’开头的标签
          editDiv.setAttribute("scrolling", "auto");
        }
      });
    }
  </script>
</body>

</html>